<template>
    <!-- <el-button size="small" @click="openCamera">调用摄像头</el-button> -->
    <!-- 拍照：<input type="file" accept="image/*" capture="camera" /> -->
    <!-- <div>录音：<input type="file" accept="audio/*" capture="microphone" /></div> -->
    <div class="pic-list">
        <ul class="picsUl">
            <li v-for="(pic, index) in picList" :key="index">
                <img :src="pic" />
                <i class="close-icon el-icon-close" @click="handleRemove(index)"></i>
            </li>
        </ul>
        <div class="upload-btn" v-show="picList.length < 3">
            <label>
                <input type="file" class="file-choose" ref="picture" @change="choosePic" accept="image/*" capture="camera" />
                <i class="el-icon-plus"></i>
            </label>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CameraPicture',
    data() {
        return {
            picList: []
        };
    },
    methods: {
        handleRemove(index) {
            let arr = this.picList.splice(index, 1);
        },
        choosePic() {
            let inputFile = this.$refs.picture;
            let files = inputFile.files;            
            let filesType = files[0].type;
            if (!filesType) {
                let arr = files[0].name.split('.');
                filesType = arr[arr.length -1];
            }
            for (let i = 0;i < files.length;i++) {
                // console.log(files[i]);
                if (filesType.indexOf('image') > -1 && files[i].size <= 50 * 1024 * 1024) {
                    this.upload(files[i]);
                } else {
                    this.$alert(`请上传图片格式文件，小于50M`);
                }
            }
            // this.picList.push(URL.createObjectURL(this.$refs.picture.files[0]))
            inputFile.value = '';
        },
        // 开始上传
        async upload (fileObj) {
            let {'name': fileName, 'size': fileSize, 'type': fileType} = fileObj;
            // var token = new Date().getTime();
            // 组件传递上传文件信息
            // this.$emit('uploadNewFile', {
            //     fileType,
            //     fileName,
            //     fileSize,
            //     uploadPercent: 0,
            //     fileUrl: '',
            //     token
            // });
            // 存储文件流            
            let formData = new FormData();
            formData.append('file', fileObj);
            this.$Posting(this.$api.uploadFile, formData).then(res => {
                if (res.isSuccess) {
                    // this.$emit('uploadNext', {token, percent: 100});
                    // this.$emit('uploadComplete', {token, url: res.data.accessUrl});
                    this.picList.push(res.data.accessUrl); // 将上传成功后的地址写到picList数组中
                } else {
                    // this.$emit('uploadError', {token, err: ''});
                }
            }).catch(err => {
                console.log('upload error', err);
                // this.$emit('uploadError', {token, err});
            });
        },
        getPicUrls() { // 获取所有的图片路径字符串
            return JSON.stringify(this.picList);
        }
    }
};
</script>

<style lang="scss" scoped>
.pic-list {
    display: flex;
    .picsUl {
        font-size: 0;        
        li {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            display: inline-block;
            position: relative;
            .close-icon {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 18px;
                width: 18px;
                height: 18px;
                cursor: pointer;
                background-color: rgba(255, 0, 0, .6);
                z-index: 2;
                color: #fff;
                border-top-right-radius: 4px;
                border-bottom-left-radius: 4px;
                transition: all 0.3 ease-in;
                &:hover {
                   background-color: rgba(255, 0, 0, 1); 
                }
            }
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 4px; 
        }
    }
    .upload-btn {
        // width: 1.56rem;
        // height: 1.56rem;        
        width: 80px;
        height: 80px;
        color: #AEAEAE;
        border: 1px solid #ccc;
        border-radius: 4px;        
        label {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            i {
                font-size: 40px;
            }
            .file-choose {
                outline: none;
                position:absolute; 
                left: -9999px;                
            }
        }
    }
}
</style>